<template>
  <div class="my-applications-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h2>我的申请</h2>
        <p>查看和管理我发起的所有申请</p>
      </div>
      <div class="header-right">
        <el-button type="primary" @click="showCreateDialog = true">
          <el-icon><Plus /></el-icon>
          发起申请
        </el-button>
      </div>
    </div>

    <!-- 搜索和筛选 -->
    <div class="filter-section">
      <el-input
        v-model="searchKeyword"
        placeholder="搜索申请"
        style="width: 300px; margin-right: 15px;"
        clearable
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      <el-select v-model="statusFilter" placeholder="状态筛选" style="width: 150px; margin-right: 15px;">
        <el-option label="全部" value=""></el-option>
        <el-option label="待审批" value="pending"></el-option>
        <el-option label="已通过" value="approved"></el-option>
        <el-option label="已拒绝" value="rejected"></el-option>
        <el-option label="已撤回" value="withdrawn"></el-option>
      </el-select>
      <el-select v-model="typeFilter" placeholder="类型筛选" style="width: 150px;">
        <el-option label="全部" value=""></el-option>
        <el-option label="请假申请" value="请假申请"></el-option>
        <el-option label="加班申请" value="加班申请"></el-option>
        <el-option label="报销申请" value="报销申请"></el-option>
        <el-option label="调休申请" value="调休申请"></el-option>
        <el-option label="出差申请" value="出差申请"></el-option>
        <el-option label="采购申请" value="采购申请"></el-option>
      </el-select>
    </div>

    <!-- 申请列表 -->
    <div class="applications-table">
      <el-table :data="filteredApplications" style="width: 100%" stripe>
        <el-table-column prop="title" label="申请标题" width="250" show-overflow-tooltip></el-table-column>
        <el-table-column prop="type" label="申请类型" width="120">
          <template #default="{ row }">
            <el-tag :type="getTypeTagType(row.type)">{{ row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusTagType(row.status)">{{ getStatusText(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="currentNode" label="当前节点" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createTime" label="申请时间" width="180">
          <template #default="{ row }">
            {{ formatTime(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template #default="{ row }">
            <el-button size="small" @click="viewApplication(row)">查看</el-button>
            <el-button 
              v-if="row.status === 'pending'"
              size="small" 
              type="warning" 
              @click="withdrawApplication(row)"
            >
              撤回
            </el-button>
            <el-button size="small" type="info" @click="viewProcess(row)">流程</el-button>
            <el-button 
              v-if="row.status === 'pending'"
              size="small" 
              type="primary" 
              @click="editApplication(row)"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination-section">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="totalApplications"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 发起申请对话框 -->
    <el-dialog
      v-model="showCreateDialog"
      title="发起申请"
      width="600px"
      :before-close="handleCreateDialogClose"
    >
      <div class="create-application">
        <el-form :model="newApplication" :rules="applicationRules" ref="applicationForm" label-width="100px">
          <el-form-item label="申请类型" prop="type">
            <el-select v-model="newApplication.type" placeholder="请选择申请类型" style="width: 100%;">
              <el-option label="请假申请" value="leave"></el-option>
              <el-option label="加班申请" value="overtime"></el-option>
              <el-option label="报销申请" value="expense"></el-option>
              <el-option label="调休申请" value="timeoff"></el-option>
              <el-option label="出差申请" value="travel"></el-option>
              <el-option label="采购申请" value="purchase"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="申请标题" prop="title">
            <el-input v-model="newApplication.title" placeholder="请输入申请标题"></el-input>
          </el-form-item>
          
          <el-form-item label="申请原因" prop="reason">
            <el-input
              v-model="newApplication.reason"
              type="textarea"
              :rows="4"
              placeholder="请详细说明申请原因"
            ></el-input>
          </el-form-item>
          
          <el-form-item label="紧急程度" prop="urgency">
            <el-radio-group v-model="newApplication.urgency">
              <el-radio label="低">低</el-radio>
              <el-radio label="普通">普通</el-radio>
              <el-radio label="紧急">紧急</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showCreateDialog = false">取消</el-button>
          <el-button type="primary" @click="submitApplication">提交申请</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 申请详情对话框 -->
    <el-dialog
      v-model="showDetailDialog"
      title="申请详情"
      width="700px"
    >
      <div v-if="currentApplication" class="application-detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="申请标题">{{ currentApplication.title }}</el-descriptions-item>
          <el-descriptions-item label="申请类型">
            <el-tag :type="getTypeTagType(currentApplication.type)">{{ currentApplication.type }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="申请状态">
            <el-tag :type="getStatusTagType(currentApplication.status)">{{ getStatusText(currentApplication.status) }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="当前节点">{{ currentApplication.currentNode }}</el-descriptions-item>
          <el-descriptions-item label="申请时间" :span="2">{{ formatTime(currentApplication.createTime) }}</el-descriptions-item>
          <el-descriptions-item label="申请原因" :span="2">{{ currentApplication.reason }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Search, Document, Clock, Check, Warning } from '@element-plus/icons-vue'

// 响应式数据
const searchKeyword = ref('')
const statusFilter = ref('')
const typeFilter = ref('')
const currentPage = ref(1)
const pageSize = ref(20)
const totalApplications = ref(0)
const showCreateDialog = ref(false)
const showDetailDialog = ref(false)
const currentApplication = ref(null)

// 表单数据
const newApplication = ref({
  type: '',
  title: '',
  reason: '',
  urgency: '普通'
})

// 表单验证规则
const applicationRules = {
  type: [{ required: true, message: '请选择申请类型', trigger: 'change' }],
  title: [{ required: true, message: '请输入申请标题', trigger: 'blur' }],
  reason: [{ required: true, message: '请输入申请原因', trigger: 'blur' }]
}

// 我的申请数据
const myApplications = ref([
  {
    id: 1,
    title: '春节假期申请',
    type: '请假申请',
    status: 'pending',
    currentNode: '部门经理审批',
    createTime: new Date('2024-01-15 09:30:00'),
    reason: '春节回家过年',
    urgency: '普通'
  },
  {
    id: 2,
    title: '项目加班申请',
    type: '加班申请',
    status: 'approved',
    currentNode: '已完成',
    createTime: new Date('2024-01-14 16:20:00'),
    reason: '项目紧急需要加班完成',
    urgency: '紧急'
  },
  {
    id: 3,
    title: '差旅费报销',
    type: '报销申请',
    status: 'rejected',
    currentNode: '财务审批',
    createTime: new Date('2024-01-13 11:45:00'),
    reason: '出差北京产生的交通住宿费用',
    urgency: '普通'
  },
  {
    id: 4,
    title: '年假申请',
    type: '调休申请',
    status: 'withdrawn',
    currentNode: '已撤回',
    createTime: new Date('2024-01-12 14:10:00'),
    reason: '计划年假旅游',
    urgency: '低'
  }
])

// 计算属性
const filteredApplications = computed(() => {
  let filtered = myApplications.value
  
  if (searchKeyword.value) {
    filtered = filtered.filter(app => 
      app.title.includes(searchKeyword.value) || 
      app.reason.includes(searchKeyword.value)
    )
  }
  
  if (statusFilter.value) {
    filtered = filtered.filter(app => app.status === statusFilter.value)
  }
  
  if (typeFilter.value) {
    filtered = filtered.filter(app => app.type === typeFilter.value)
  }
  
  return filtered
})

// 方法
const getTypeTagType = (type) => {
  const typeMap = {
    '请假申请': 'primary',
    '加班申请': 'success',
    '报销申请': 'warning',
    '调休申请': 'info',
    '出差申请': '',
    '采购申请': 'danger'
  }
  return typeMap[type] || 'default'
}

const getStatusTagType = (status) => {
  const statusMap = {
    'pending': 'warning',
    'approved': 'success',
    'rejected': 'danger',
    'withdrawn': 'info'
  }
  return statusMap[status] || 'default'
}

const getStatusText = (status) => {
  const statusMap = {
    'pending': '待审批',
    'approved': '已通过',
    'rejected': '已拒绝',
    'withdrawn': '已撤回'
  }
  return statusMap[status] || status
}

const formatTime = (time) => {
  if (!time) return ''
  return new Date(time).toLocaleString('zh-CN')
}

const viewApplication = (application) => {
  currentApplication.value = application
  showDetailDialog.value = true
}

const withdrawApplication = (application) => {
  ElMessageBox.confirm(
    '确定要撤回这个申请吗？',
    '确认撤回',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    application.status = 'withdrawn'
    application.currentNode = '已撤回'
    ElMessage.success('申请已撤回')
  })
}

const viewProcess = (application) => {
  ElMessage.info(`查看流程：${application.title}`)
  // 这里可以打开流程图对话框
}

const editApplication = (application) => {
  ElMessage.info(`编辑申请：${application.title}`)
  // 这里可以打开编辑对话框
}

const handleSizeChange = (val) => {
  pageSize.value = val
  // 重新加载数据
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  // 重新加载数据
}

const handleCreateDialogClose = (done) => {
  newApplication.value = {
    type: '',
    title: '',
    reason: '',
    urgency: '普通'
  }
  done()
}

const submitApplication = () => {
  // 表单验证和提交逻辑
  ElMessage.success('申请提交成功')
  showCreateDialog.value = false
  handleCreateDialogClose(() => {})
}

// 生命周期
onMounted(() => {
  totalApplications.value = myApplications.value.length
})
</script>

<style scoped>
.my-applications-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-left h2 {
  margin: 0 0 5px 0;
  color: #333;
  font-size: 24px;
}

.header-left p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.filter-section {
  margin-bottom: 20px;
  padding: 15px 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.applications-table {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.pagination-section {
  margin-top: 20px;
  text-align: right;
  padding: 15px 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.create-application {
  padding: 10px 0;
}

.application-detail {
  padding: 10px 0;
}

.dialog-footer {
  text-align: right;
}

:deep(.el-table) {
  border-radius: 0;
}

:deep(.el-table th) {
  background-color: #f8f9fa;
  color: #333;
  font-weight: 600;
}

:deep(.el-table td) {
  padding: 12px 0;
}

:deep(.el-button + .el-button) {
  margin-left: 8px;
}
</style>